<template>
    <el-form ref="form" :model="form" :rules="rules" size="medium" label-width="88px">
        <el-row :gutter="24">
            <el-col :xl="6" :lg="8">
                <el-form-item label="路线名称" prop="highwayCode">
                    <RoadSelect
                        :value.sync="form.highwayCode"
                        :name.sync="form.highwayName"
                        :stake.sync="form.stake"
                        :disabled="pageDisabled"
                        clearable
                        @change="roadChange"
                    />
                    <div v-show="form.highwayCode" class="stake-tip">桩号范围：{{ form.stake }}</div>
                </el-form-item>
            </el-col>
            <el-col :xl="12" :lg="16">
                <el-col :span="7" style="padding: 0">
                    <el-form-item label="检查路段" prop="startStake1">
                        <el-input
                            v-model.trim="form.startStake1"
                            :placeholder="!form.highwayCode || pageDisabled ? '请选择路线' : '请选择'"
                            maxlength="3"
                            :disabled="!form.highwayCode || pageDisabled"
                            @change="form.endStake1 = ''"
                        >
                            <div slot="prepend" class="input-unit">K</div>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" style="padding: 0">
                    <el-form-item
                        class="spe-item"
                        label-width="30px"
                        label="+"
                        prop="endStake1"
                        :rules="useCheckStake(form.highwayCode, 1, form.startStake1, form.stake, true)"
                    >
                        <el-input v-model.trim="form.endStake1" :disabled="!form.startStake1 || pageDisabled" maxlength="3" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="7" style="padding: 0">
                    <el-form-item class="spe-item" label-width="50px" label="~" prop="startStake2">
                        <el-input
                            v-model.trim="form.startStake2"
                            :disabled="!form.highwayCode || pageDisabled"
                            :placeholder="!form.highwayCode || pageDisabled ? '请选择路线' : '请选择'"
                            maxlength="3"
                            @change="form.endStake2 = ''"
                        >
                            <div slot="prepend" class="input-unit">K</div>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" style="padding: 0">
                    <el-form-item
                        class="spe-item"
                        label-width="30px"
                        label="+"
                        prop="endStake2"
                        :rules="useCheckStake(form.highwayCode, 1, form.startStake2, form.stake, true)"
                    >
                        <el-input v-model.trim="form.endStake2" :disabled="!form.startStake2 || pageDisabled" maxlength="3" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-col>
            <el-col :xl="6" :lg="8">
                <el-form-item label="检查部门" prop="deptIds">
                    <OrgSelect :is-filter="true" :value.sync="form.deptIds" :name.sync="form.deptName" :disabled="pageDisabled" clearable @change="form.inspectUsers = []" />
                </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="8">
                <el-form-item label="巡查人员" prop="inspectUsers">
                    <UserSelect :id="deptId" :multiple="true" :value.sync="form.inspectUsers"></UserSelect>
                </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="8">
                <el-form-item label="负责人" prop="principal">
                    <UserSelect :value.sync="form.principal" :is-all="true"></UserSelect>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>

<script>
import useCheckStake from '@/hooks/useCheckStake'
import { isInteger } from '@/utils/validate'

export default {
    name: 'FormInfo',
    props: {
        pageDisabled: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            form: {
                deptIds: [],
                inspectUsers: [],
                startStake1: '',
                startStake2: '',
                endStake1: '',
                endStake2: ''
            },
            rules: {
                deptIds: [{ required: true, message: '请选择检查部门', trigger: 'change' }],
                highwayCode: [{ required: true, message: '请选择路线名称', trigger: 'change' }],
                startStake1: [
                    // { required: true, message: '请输入起始桩号', trigger: 'blur' },
                    // { validator: this.validNum, trigger: 'blur' }
                ],
                startStake2: [
                    // { required: true, message: '请输入终点桩号', trigger: 'blur' },
                    // { validator: this.validNum, trigger: 'blur' }
                ],
                inspectUsers: [{ required: true, message: '请选择巡查人员', trigger: 'change' }],
                principal: [{ required: true, message: '请选择负责人', trigger: 'change' }]
            }
        }
    },
    computed: {
        deptId() {
            if (Array.isArray(this.form.deptIds)) {
                return this.form.deptIds[this.form.deptIds.length - 1]
            }
            return this.form.deptIds
        }
    },
    watch: {
        'form.stake'(newValue) {
            this.$emit('update:stake', newValue)
        }
    },
    created() {
        const query = this.$route.query
        query.deptIds = query.deptIds ? query.deptIds.toString().split(',').map(Number) : this.$store.getters.avatar.depart[0].id
        
        this.form = Object.assign(this.form, query)
        this.$emit('update:road', this.form.highwayCode)
    },
    methods: {
        handleValidate() {
            return new Promise((resolve, reject) => {
                this.$refs.form.validate((valida) => {
                    resolve(valida)
                })
            })
        },
        // 选择公路时把code传到父组件，作为隧道桥梁查询条件，且巡查记录新增时url没默认公路
        roadChange() {
            this.$emit('update:road', this.form.highwayCode)
            this.$emit('update:stake', this.form.stake)
        },
        validNum(rule, value, callback) {
            if (value && !isInteger(value)) {
                callback(new Error('请输入数字'))
            } else {
                callback()
            }
        },
        useCheckStake
    }
}
</script>

<style lang="scss" scoped>
.spe-item {
    ::v-deep {
        .el-form-item__label {
            text-align: center;
            padding: 0;
            &::before {
                display: none;
            }
        }
        .el-input,
        .el-input__inner {
            min-width: auto !important;
        }
    }
}
</style>
